<template>
  <div class="input-password">
    <span class="input-password-text">
      <a-input
        v-model:value="dataValue"
        :disabled="disabled"
        placeholder="请输入密码"
        v-if="actionIcon"
        allowClear
        @change="changeValue"
      />
      <a-input-password
        v-model:value="dataValue"
        :disabled="disabled"
        placeholder="请输入密码"
        v-if="!actionIcon"
        :visibilityToggle="false"
        allowClear
        @change="changeValue"
      />
    </span>
    <span class="input-password-icon" @click="inputValue">
      <SvgIcon v-if="actionIcon" class="iconDef" :name="'eyes'" :color="'#1890ff'" width="16" height="16" />
      <SvgIcon v-else class="iconDef" :name="'eyesClose'" :color="'#1890ff'" width="16" height="16" />
    </span>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
  },
});
const emits = defineEmits(['update:value']);
const actionIcon = ref(false);
const dataValue = ref(props.value);
watch(
  () => props.value,
  (val) => {
    dataValue.value = val;
  },
);

const changeValue = (e: any) => {
  emits('update:value', e.target.value);
};
const inputValue = () => {
  actionIcon.value = !actionIcon.value;
};
</script>

<style lang="less" scoped>
.input-password {
  display: flex;
  align-items: center;
  position: relative;
}

.input-password-text {
  margin-right: 5px;
  display: inline-block;
  width: 100%;
}

.input-password-icon {
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
